<template>
  <!-- 家政人员弹层 -->
  <div>
    <van-card>
      <template #tags>
        <van-row>
          <span class="top">职业类型</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class="listspan"
            v-for="(item, index) in list"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
        <div class="bottom" type="flex" justify="center" style="width: 375px">
          <span>展开<van-icon name="arrow-down"/></span>
        </div>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">学历</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class=" listspan"
            v-for="(item, index) in joblistlist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
        <div class="bottom" type="flex" justify="center" style="width: 375px">
          <span>展开<van-icon name="arrow-down"/></span>
        </div>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">民族</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class="listspan"
            v-for="(item, index) in nationlist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
        <div class="bottom" type="flex" justify="center" style="width: 375px">
          <span>展开<van-icon name="arrow-down"/></span>
        </div>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">婚姻状况</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class="listspan"
            v-for="(item, index) in marriagelist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">星座</span>
        </van-row>
        <van-row type="flex" justify="start" style="width: 375px">
          <van-button
            class="listspan"
            style="margin-right:20px;width: 143px;"
            v-for="(item, index) in starlist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
        <div class="bottom" type="flex" justify="center" style="width: 375px">
          <span>展开<van-icon name="arrow-down"/></span>
        </div>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">生肖</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class="listspan"
            v-for="(item, index) in zodlist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
        <div class="bottom" type="flex" justify="center" style="width: 375px">
          <span>展开<van-icon name="arrow-down"/></span>
        </div>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">工作年限</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class="listspan"
            v-for="(item, index) in yearlist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
        <div class="bottom" type="flex" justify="center" style="width: 375px">
          <span>展开<van-icon name="arrow-down"/></span>
        </div>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-row>
          <span class="top">主要技能</span>
        </van-row>
        <van-row type="flex" justify="space-around" style="width: 375px">
          <van-button
            class="listspan"
            v-for="(item, index) in sklist"
            :key="index"
            >{{ item }}</van-button
          >
        </van-row>
        <div class="bottom" type="flex" justify="center" style="width: 375px">
          <span>展开<van-icon name="arrow-down"/></span>
        </div>
      </template>
    </van-card>

    <van-card>
      <template #tags>
        <van-button class="buntn" round type="info">清除条件</van-button>
        <van-button class="buntn" round type="info">确认筛选</van-button>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        "全部职业",
        "月嫂",
        "育婴师",
        "保洁/清洁",
        "保姆",
        "产康师",
        "早教/托育",
        "养老/陪护"
      ],
      joblistlist: [
        "小学",
        "初中",
        "中专",
        "职高",
        "高中",
        "大专",
        "本科",
        "研究生"
      ],
      nationlist: [
        "汉族",
        "蒙古族",
        "回族",
        "藏族",
        "维吾尔族",
        "苗族",
        "彝族",
        "壮族"
      ],
      starlist: ["白羊座", "金牛座"],
      marriagelist: ["未婚", "已婚", "离异", "丧偶"],
      zodlist: ["鼠", "鸡", "狗", "猪"],
      yearlist: ["1年", "2年", "3年", "4年", "5年", "6年", "7年", "8年"],
      sklist: [
        "做饭",
        "催乳",
        "产后修复",
        "月子餐",
        "家庭保洁",
        "洗衣",
        "育婴护理",
        "小儿推拿"
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.van-card {
  background-color: #fff;
}
.listspan {
  width: 132px;
  height: 46px;
  font-size: 22px;
  color: rgba(123, 119, 119, 100);
  margin: 30px 8px;
  border-radius: 28px 28px 28px 28px;
  font-family: PingFangSC-regular;
  white-space: nowrap;
}
.top {
  margin-left: 23px;
  font-size: 28px;
}
.bottom {
  text-align: center;
  color: rgba(143, 142, 148, 100);
  font-size: 26px;
  font-family: PingFangSC-regular;
}
.buntn {
  width: 320px;
  height: 70px;
  font-size: 24px;
  background-color: rgba(63, 81, 181, 100);
  margin-left: 14px;
}
</style>
